<template>
    <div class="home">
      <div class="block text-center">
        <div class="block text-center">
            <div style="margin-bottom: 10px">
      <img class="img" src="../../../assets/images/PetCare/u0.png" alt="" />
      </div>
    </div>
      </div>
      <div class="middle">
      <img :src="u8" alt="">
      </div>
      
    </div>
  </template>
  
  <script setup>
  import u5 from '@/assets/images/首页/u5.png';
  import u6 from '@/assets/images/首页/u6.png';
  import u7 from '@/assets/images/首页/u7.png';
  import u8 from '@/assets/images/ScientificRescue/u87.png'
  import u0 from '@/assets/images/ScientificRescue/u0.png'
  const arrImages = [u5, u6, u7];
  </script>
  
  <style lang="less" scoped>
  .middle {
    margin-top: -15px;
    padding: 0 200px;
    padding-bottom: 88px;
   img{
    width: 100%;
    height: auto;
   }
    
  }
  .middle2 {
    margin-top: 100px;
    background-color: #f6f7f8;
  }
  .middle3 {
    margin-top: 70px;
    padding: 0px 150px;
    .p1 {
      font-family: '微软雅黑 Bold', '微软雅黑', '微软雅黑', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 32px;
      color: #3a3838;
      text-align: center;
    }
    .p2 {
      margin-top: 40px;
      img {
        width: 100%;
      }
    }
  }
  .middle4 {
    margin-top: 20px;
    position: relative;
    img {
      width: 100%;
    }
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .p {
        font-size: 40px;
        color: white;
      }
      .btn {
        margin-top: 40px;
        height: 68px;
        width: 100%;
      }
      .el-btn {
        height: 50px;
        width: 200px;
        border-radius: 90px;
        color: #16b78e;
        font-size: 18px;
        border-color: #16b78e;
      }
      .el-btn:hover {
        background-color: #16b78e;
        color: white;
      }
    }
  }
  .home {
  }
  .demonstration {
    color: var(--el-text-color-secondary);
  }
  
  .el-carousel__item img {
    width: 100vw;
    // height: 100vh;
    object-fit: contain; /* 或者 object-fit: cover; */
  }
  
  .el-carousel__item:nth-child(2n) {
    // background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    // background-color: #d3dce6;
  }
  
 .img {
  width: 100%;
  height: 600px;
}
  </style>
  